import {designPage} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {Select, theme} from "antd";

const TestDesignToken = () => {
  const { token } = theme.useToken();
  console.log(token);
  return (
    <span style={{
      backgroundColor: token.colorBgContainer,
      color: token.colorText,
      padding: '12px',
      borderRadius: token.borderRadius,
    }}>
      TestDesignToken
    </span>
  );
};

export const demo1 = designPage(() => {

  const options = [
    { value: 'jack', label: 'Jack' },
    { value: 'lucy', label: 'Lucy' },
    { value: 'Yiminghe', label: 'yiminghe' },
    { value: 'disabled', label: 'Disabled', disabled: true },
  ];

  return () => (
    <DemoRow title="design token">
      <TestDesignToken/>
      <Select options={options} placeholder="项目负责人" style={{ width: '200px' }}/>
    </DemoRow>
  );
});
